*{
  margin: 0;
  padding: 0;
}

html{
  /* 1rem=100px */
  font-size: 13.333333vw;
}

a{
  text-decoration: none;
}



.container{
  margin: 0 .24rem;
}

body{
  background: #333;
}

/*-------------- 顶部导航 ------------------*/
.wrap{
  display: flex;
  background: url(https://image1.suning.cn/uimg/cms/img/164722327855148786.jpg)no-repeat center center;
  background-size: cover;
  /* margin: 0 .34rem; */
}

.wrap-title{
  display: flex;
  height: .88rem;
  justify-content: space-between;
  align-items:center ;
}

.title{
  display: block;
}

.content{
  display: flex;
  width: 3.9rem;
  height: .76rem;
  cursor: pointer;
}

.content img{
  width: 100%;
}

/*----------- 搜索栏 -----------*/
.search{
width: 7.02rem;
height: .88rem;
/* display: flex; */
}
.search form{
  display: flex;
  /* width: 7.02rem; */
  height: 100%;
  align-items: center;
  position: relative;
}

.search-icon.iconfont.icon-sousuo1{
position: absolute;
width: .64rem;
height: .64rem;
/* text-align: center; */
color: #ccc;
font-size: .36rem;
font-weight: 600;
left: .2rem;
top: .28rem;
z-index: 6;
}

.search-text{
  flex-grow: 1;
  height: .64rem;
  padding-left: .65rem;
  font-size: .28rem;
  background-color: #fff;
  border-radius: .32rem;
  border: none;
  outline: none;
}

/*------------ 轮播图 -------------*/
.banner{
  background: url(https://image1.suning.cn/uimg/cms/img/164722328483044085.jpg)no-repeat center center;
  background-size: 100%;
  z-index: 9;
}

.banner .container{
  border-radius: .24rem;
  overflow: hidden;
}

.banner .banner-img{
 /* width: 100%; */
 height: 3.19rem;
 border-radius: .24rem;
 overflow: hidden;
 display: flex;

}

.banner-img img{
  width: 100%;
  align-self: flex-end;
}

/* .body{
  display: flex;
} */

.body-img{
  display: flex;
}

.body-img img{
  width: 100%;
}

.body-footer{
  display: flex;
  justify-content: center;
}
.footer-left img{
  width: 100%;
}

.footer-right img{
  width: 100%;
}

/*-------------- 商品导航条 ----------------*/

body{
  background: #f7f7f7;
  font-size: .24rem;
  width: 7.5rem;
  font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
}

.wrap-nav{
  display: flex;
  flex-wrap: wrap;
  width: 7.5rem;
 
}
.nav-item{
  display: flex;
  width: 1.5rem;
  height: 1.42rem;
  flex-direction: column;
  align-items: center;
}

.nav-item img{
  display: block;
  width:0.84rem;
  height:0.84rem;
}

.nav-item span{
  display: block;
  width: 1.5rem;
  height: 0.28rem;
  line-height: .28rem;
  font-size: .22rem;
  color: #666;
 text-align: center;
  margin-top: 0.05rem;
}

.content-img{
  width: 7.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
}

.content-img img{
  width: 100%;
}
